<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .box{
      width: 100px;
      height: 100px;
      background-color: yellow;
    }
  </style>
</head>
<body>

<div id="app">
  <!--事件中可以直接写要绑定的方法的名字-->
  <button v-on:click="addUser">添加</button>
  <!--事件中可以直接写调用方法的形式-->
  <button v-on:click="modifyUser()">修改</button>
  <!--事件中可以直接写调用方法的形式-->
  <button v-on:click="deleteUser(1)">删除</button>

  <!--对于事件的绑定来说，可以用 @ 来简化 v-on: -->
  <div class="box" @mouseenter="fn1" @mouseleave="fn2">

  </div>
</div>


<script src="js/vue.js"></script>
<script>
  var vm = new Vue({
    el:'#app',
    data:{
    },
    // 在 methods 中定义方法
    methods:{
      addUser:function () {
          alert("做添加用户的操作！");
      },
      modifyUser:function () {
        alert("做修改用户的操作！");
      },
      deleteUser:function (userId) {
        if( confirm(`确定要删除 ${userId} 的用户信息吗？`)){
          alert("做删除用户的操作！");
        }
      },
      fn1:function () {
        console.log("鼠标移入。。。！");
      },
      fn2:function () {
        console.log("鼠标离开。。。！");
      }

    }
  });
</script>
</body>
</html>
